<template>
  <div class="PaiMing" ref="redContainer">
    <b><div class="Xiaos">商品销售排名</div></b>

    <b><div class="Quanb" @click="handleClick">查看全部信息</div></b>
    <el-table
      class="BiaogeZt"
      :data="tableData"
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <!-- <div class="PaimShangp"> -->
      <el-table-column prop="date" label="排名" width="260"> </el-table-column>
      <!-- </div> -->
      <el-table-column prop="name" label="商品" width="260"> </el-table-column>
      <el-table-column prop="address" label="销量" sortable width="260">
      </el-table-column>
      <el-table-column prop="sale" label="成交金额" sortable width="160">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { Paim } from "@/mockApi/Shujvpage/PaimData";
import { eventBus } from "@/utils/eventBus";
export default {
  name: "paiXu",
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    handleClick() {
      this.$router.push("/home/5-1");
      eventBus.$emit("jumpRouter", "/home/5-1");
    },
  },
  mounted() {
    Paim.getAll().then((res) => {
      this.tableData = res;
      console.log("aa", res);
    });
  },
};
</script>

<style scoped lang="scss">
:deep(.el-table .el-table__cell) {
  padding: 15px;
}
:deep(.el-table thead) {
  height: 120px;
}
:deep(.el-table th.el-table__cell.is-sortable) {
  top: 30px;
}
.PaiMing {
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 100%;
  position: relative;
}
.Xiaos {
  position: absolute;
  top: 26px;
  left: 28px;
  z-index: 1;
  font-size: 20px;
}
.BiaogeZt {
  font-size: 18px;
}
.Quanb {
  position: absolute;
  z-index: 1;
  right: 57px;
  top: 30px;
  cursor: pointer;
}
:deep(.el-table__cell) {
  top: 30px;
}
:deep(.el-table__body-wrapper) {
  height: 370px;
}
</style>
